<template>
  <view class="fund-page">
    <scroll-view scroll-y class="fund-content-page" :style="`width: 100%`">
      <view class="transition-bg">
        <view>
          <view class="u-line-3 contract-name">
            <text class="primary-color">【{{ projectInfo.projectType }}】</text>
            {{ projectInfo.projectName }}
          </view>
          <view class="tag-box">
            <view>
              <text class="tag-item">
                {{ projectInfo.projectType
                }}{{
                  projectInfo.drugRegister ? '-' + projectInfo.drugRegister : ''
                }}
              </text>
              <text class="tag-item m-x-10" v-if="projectInfo.stages">{{
                projectInfo.stages
              }}</text>
              <text class="tag-item">{{ projectInfo.projectNo }}</text>
            </view>
          </view>
          <view class="u-m-t-20">
            <describeVue
              :data="taskInfo"
              :column="headColumn"
              :empty-value="'无'"
            ></describeVue>
          </view>
          <view class="u-m-t-10 u-m-b-10">
            <u-divider
              border-color="#e8eaee"
              half-width="50%"
              :use-slot="false"
            ></u-divider>
          </view>
          <view class="u-text-right">
            <span
              class="font-bold"
              :class="FUNDS_STATUS_MAP[taskInfo.status]?.color"
              >{{ FUNDS_STATUS_MAP[taskInfo.status]?.label }}</span
            >
          </view>
        </view>
      </view>
      <view class="u-p-b-10">
        <u-card
          v-for="item in fundAdjustFeeTypeInfo"
          :key="item.adjustDetailId"
        >
          <template #head>
            <view class="u-f-w-b u-main-color u-font-xl">
              {{ item.feeTypeLevel1Name }}
              <text v-if="item.feeTypeLevel2Name">
                /{{ item.feeTypeLevel2Name }}
              </text>
              <text v-if="item.feeTypeLevel3Name">
                /{{ item.feeTypeLevel3Name }}
              </text>
            </view>
          </template>
          <view slot="body">
            <view class="u-flex u-row-between u-m-b-10">
              <view class="u-tips-color">剩余费用预算(元)：</view>
              <view class="u-main-color u-f-w-b">{{
                formatPrice(item.usableAmount)
              }}</view>
            </view>
            <view class="u-flex u-row-between u-m-b-10">
              <view class="u-tips-color">实际可用结余(元)：</view>
              <view class="u-main-color u-f-w-b">{{
                formatPrice(item.realUsableAmount)
              }}</view>
            </view>
            <view class="u-flex u-row-between u-m-b-10">
              <view class="u-tips-color">调整后费用预算(元)：</view>
              <view
                :class="{
                  'u-f-w-b': true,
                  'u-type-success': item.adjustUsableAmount < item.usableAmount,
                  'u-type-error': item.adjustUsableAmount > item.usableAmount,
                  'u-main-color': item.adjustUsableAmount === item.usableAmount,
                }"
                >{{ formatPrice(item.adjustUsableAmount) }}</view
              >
            </view>
            <view class="u-flex u-row-between u-m-b-10">
              <view class="u-tips-color">调整后可用结余(元)：</view>
              <view
                :class="{
                  'u-f-w-b': true,
                  'u-type-success':
                    item.adjustRealUsableAmount < item.realUsableAmount,
                  'u-type-error':
                    item.adjustRealUsableAmount > item.realUsableAmount,
                  'u-main-color':
                    item.adjustRealUsableAmount === item.realUsableAmount,
                }"
                >{{ formatPrice(item.adjustRealUsableAmount) }}</view
              >
            </view>
          </view>
        </u-card>
        <!-- 自定义表单数据 -->
        <view class="u-m-l-30 u-m-r-30 u-m-t-30" v-if="formInfoData.length > 1">
          <u-subsection
            :list="formInfoData"
            v-model="current"
            bg-color="#cccccc"
          ></u-subsection>
        </view>
        <view v-for="item in formInfoData" :key="item.formId">
          <template v-if="item.formId === formInfoData[current].formId">
            <customFormRender
              v-if="item.formId"
              :form-id="item.formId"
              :query-value-flag="1"
            />
          </template>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-total">
      <view class="u-flex u-row-between">
        <view class="u-tips-color">剩余费用预算 合计：</view>
        <view class="u-f-w-b u-font-xl u-main-color">{{
          formatPrice(totalInfo.usableAmounts)
        }}</view>
      </view>
      <view class="u-flex u-row-between">
        <view class="u-tips-color">实际可用结余 合计：</view>
        <view class="u-f-w-b u-font-xl u-main-color">{{
          formatPrice(totalInfo.realUsableAmounts)
        }}</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import describeVue from '@/components/describe.vue';
import { FUNDS_STATUS_MAP } from '@/enums/financeEnum';
import customFormRender from '@/components/customFormRender/index.vue';
import { formatPrice } from '@/utils/tools';
const current = ref<number>(0);
const headColumn = [
  {
    label: '申请人',
    prop: 'createUserName',
    width: 200,
  },
  {
    label: '申请时间',
    prop: 'createTime',
    width: 200,
  },
  {
    label: '当前经办人',
    prop: 'currentOporater',
    width: 200,
  },
];
const props = defineProps<{
  taskInfo: any;
  formInfoData: any;
  projectInfo: any;
  fundAdjustFeeTypeInfo: any;
  totalInfo: any;
}>();

const {
  taskInfo,
  formInfoData,
  projectInfo,
  fundAdjustFeeTypeInfo,
  totalInfo,
} = toRefs(props);
</script>
<style lang="scss">
.transition-bg {
  width: 90%;
  border-radius: 30rpx;
  padding: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);

  .contract-name {
    font-size: 32rpx;
    height: auto;
    font-weight: bold;
  }
  .tag-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    align-items: center;

    .tag-item {
      background: rgba(255, 255, 255, 0.5);
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #0177fd;
    }
    .m-x-10 {
      margin: 0 10rpx;
    }
  }
  .primary-color {
    color: #0177fd;
  }
}

.fund-page {
  height: 100%;
  .fund-content-page {
    height: calc(100% - 150rpx);
  }
}
.bottom-total {
  background-color: #fff;
  padding: 20rpx;
  position: relative;
  bottom: -22rpx;
}
</style>
